<template>
    <div>
      <Card class="clearfix" style="padding-bottom: 16px">
        <p slot="title">
          意向订单
        </p>
        <Form label-position="left" :label-width="72">
          <Row :gutter="24">
            <i-col span="6">
              <FormItem label="订单编号：">
                <Input v-model="orderNo" placeholder="请输入订单编号"/>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="用户名称：">
                <Input v-model="userName" placeholder="请输入用户名称"/>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="联系方式：">
                <Input v-model="userPhone" placeholder="请输入联系方式"/>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="订单状态：">
                <Select v-model="orderStatus" clearable>
                  <Option  :value="0" >未支付</Option>
                  <Option  :value="1" >等待车源</Option>
                  <Option  :value="2" >已确认</Option>
                  <Option  :value="3" >待验车</Option>
                  <Option  :value="4" >待签合同</Option>
                  <Option  :value="5" >已完成</Option>
                  <Option  :value="9" >已取消</Option>
              </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="21">
            <i-col span="6">
              <FormItem label="开始时间：">
                <Date-picker type="date" placeholder="选择日期"  @on-change="startDate=$event"></Date-picker>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="结束时间：">
                <Date-picker type="date" placeholder="选择日期"  @on-change="endDate=$event"></Date-picker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="上牌地：">
                <Select v-model="provinceValue"  filterable style="width:130px;margin-right: 10px">
                  <Option @click.native="setArea(item)" v-for="(item,index) in areaList" :value="item.cityName" :key="index" :label="item.cityName">{{ item.cityName }}</Option>
              </Select>
                <Select v-model="cityValue" filterable style="width:130px" >
                  <Option v-for="(item,index) in areaCityList" :value="item.cityName" :key="index" :label="item.cityName">{{ item.cityName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="2">
              <Button type="success" style="width:80px;" @click="searchData" icon="ios-search" >搜索</Button>
            </i-col>
          </Row>
          <Row :gutter="15">
            <i-col span="2">
               <Button  @click="addData" v-if="access.add" icon="ios-checkmark" style="width:80px;" type="primary">新增</Button>
            </i-col>
          </Row>
        </Form>
        <br>
        <div>
            <list-table refs="table1" v-model="tableData" :access="access" :table-data="tableData"></list-table>
        </div>
        <Page ref="pages" :total="itemTotal" show-total style="float: right; margin-top: 20px" @on-change="getList"></Page>
      </Card>
    </div>
</template>

<script>
import listTable from './components/listTable.vue'
import ajax from '../../../libs/axios.js'
export default {
    name: 'orderv2index',
    components: {
        listTable
    },
    data () {
        return {
           orderNo:'',                  // 搜索条件-订单编号
           kezu_testModelShow:false,
           loginName: '',               // 用户名称
           itemTotal: 0,                // 表格条数
           tableData: [],               // 表格数据集
           userName:'',                 // 用户名搜索
           userPhone:'',                // 用户联系方式
           orderStatus:'',              // 订单状态
           areaList:[],                 // 省的集合
           areaCityList:[],             // 市的集合
           provinceValue:'',            // 省
           cityValue:'',                // 市
           startDate:'',                // 开始时间
           endDate:'',                  // 结束时间
           versionName: '',
           access:{
                edit: true,             // 控制编辑按钮显示
                func: true,
                remove: true,
                add: true
            },
        }
    },
    mounted () {
      this.init()
    },
    activated() {
      this.init()
    },
    methods: {
        // 初始化数据
        init () {
           this.$store.commit('setActiveName', 'orderv2index');
           this.getList(1)
        },
        // 新增
        addData () {
          this.kezu_testModelShow = true;
            let argu = {
                id: 'add'
            }
            this.$router.push({
                name: 'addorderv2',
                params: argu
            })
        },
        // 搜索
        searchData () {
          if (this.provinceValue == undefined){
            this.provinceValue="";
            this.cityValue="";
          }

          if (this.orderStatus == undefined){
            this.orderStatus="";
          }
            this.getList(1)
        },
        // 初始化列表
        getList (page) {
            let _that = this;
            let url = 'adminlogin/v2/carorder/selectInfos'
            let data = {
                endDate:this.endDate,
                startDate: this.startDate,
                userPhone: this.userPhone,
                orderStatus: this.orderStatus,
                userName: this.userName,
                orderNo: this.orderNo,
                province: this.provinceValue,
                city: this.cityValue,
                pageSize: 10,
                pageNum: page
            }
            ajax.formRes(url, data).then(res => {
                _that.tableData = res.data;
                _that.itemTotal = res.count;
                _that.areaList = res.provincelist;
            }).catch(err => {
                console.log('有错误信息')
            })
        },
        // 上地牌数据
        setArea(obj){
            this.areaCityList = obj.citys;
            // this.cityValue=obj.citys[0].cityName;
        },
    },

}
</script>


<style lang="less">
  @import "../../../styles/common.less";
  @import "../../../styles/table.less";
</style>

